<template>
	<!-- 我的 -->
	<view class="my2">
		<view class="backgroundHead"></view>
		<view class="head">
			<view class="settingButton">
				<img src="@/static/设置.png" @click="toPages('设置')" alt="" />
			</view>
			<view class="head1">
				<view class="update1" @click="toUpdateMy()">
					<view class="imageAndName">
						<view class="imageHead">
							<img src="@/static/男头像.png" alt="" />
						</view>
						<view class="name">
							{{ item.name }}
						</view>
					</view>

					<view class="rightArrows">
						<img src="@/static/右箭头.png" alt="" />
					</view>
				</view>
			</view>
		</view>

		<view class="body">
			<view class="settingItem" @click="isAccountant ? toPages('公司赊销') : roleToast()">
				<img src="@/static/赊销.png" class="icon1" alt="" />
				<view class="settingItemName">公司赊销</view>
				<img src="@/static/右箭头2.png" class="icon2" alt="" />
			</view>
			<view class="settingItem" @click="financialAnalysis()">
				<img src="@/static/财务分析.png" class="icon1" alt="" />
				<view class="settingItemName">财务分析</view>
				<img src="@/static/右箭头2.png" class="icon2" alt="" />
			</view>
			<view class="settingItem" @click="isAdmin ? toPages('人员管理') : roleToast()">
				<img src="@/static/人员管理.png" class="icon1" alt="" />
				<view class="settingItemName">人员管理</view>
				<img src="@/static/右箭头2.png" class="icon2" alt="" />
			</view>
			<view class="settingItem">
				<img src="@/static/审核进度条.png" class="icon1" alt="" />
				<view class="settingItemName">审核进度</view>
				<img src="@/static/右箭头2.png" class="icon2" alt="" />
			</view>
		</view>
	</view>
</template>

<script>
import { request } from '../../request';
import { excel } from '../../request/excel';

export default {
	computed: {
		isAccountant() {
			return uni.getStorageSync('role') == 'accountant';
		},
		isAdmin() {
			return uni.getStorageSync('role') == 'admin';
		}
	},
	data() {
		return {
			item: {
				name: null
			}
		};
	},
	methods: {
		toPages(item) {
			if (item == '人员管理') {
				uni.navigateTo({
					url: '/pages/my/peopleManagement'
				});
			} else if (item == '设置') {
				uni.navigateTo({
					url: '/pages/my/setting'
				});
			} else if (item == '公司赊销') {
				uni.navigateTo({
					url: '/pages/my/companyCredit'
				});
			}
		},
		financialAnalysis() {
			// excel('public/excelGeneralLedger', {}, 'GET');
			uni.navigateTo({
				url: '/pages/financialStatistics/financialStatistics'
			});
		},
		toUpdateMy() {
			uni.navigateTo({
				url: '/pages/my/updateMy'
			});
		},
		// 权限不足提示
		roleToast() {
			uni.showToast({
				title: '权限不足',
				image: '../../static/警告.png',
				duration: 1000
			});
		}
	},
	onShow() {
		request('public/selectMyUser', {}, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}
			this.item = res.data.data;
			uni.setStorageSync('role', res.data.data.role);
		});
	}
};
</script>

<style scoped>
.my2 {
	width: 100%;
	height: auto;
}

.backgroundHead {
	position: absolute;
	width: 100%;
	height: 400rpx;
	z-index: -1;
	background: linear-gradient(135deg, #1677ff 0%, #0a88c2 100%);
}
/* 卡片背景装饰 */
.backgroundHead::before {
	content: '';
	position: absolute;
	top: -130rpx;
	right: -180rpx;
	width: 400rpx;
	height: 400rpx;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
}

.backgroundHead::after {
	content: '';
	position: absolute;
	bottom: -100rpx;
	left: -100rpx;
	width: 240rpx;
	height: 240rpx;
	background-color: rgba(255, 255, 255, 0.05);
	border-radius: 50%;
}

.head {
	width: 100%;
	height: 400rpx;
}

.settingButton {
	position: absolute;
	width: 50rpx;
	height: 50rpx;
	margin: 40rpx 0 0 650rpx;
}

.settingButton img {
	width: 50rpx;
	height: 50rpx;
}

.head1 {
	padding-top: 100rpx;
}
.update1 {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.imageAndName {
	display: flex;
	justify-content: center;
	align-items: center;
}

.imageHead {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
}

.imageHead img {
	width: 150rpx;
	height: 150rpx;
}

.rightArrows {
	width: 80rpx;
	height: auto;
}

.rightArrows img {
	width: 60rpx;
}

.name {
	color: #ffffff;
	margin-left: 40rpx;
}

.body {
	width: 100%;
	height: auto;
	margin-top: 80rpx;
}

.settingItem {
	width: 100%;
	height: 60rpx;
	margin: 20rpx 0;
	background-color: #ffffff;
	padding: 30rpx;
	display: flex;
}

.settingItem img {
	width: 60rpx;
	height: 60rpx;
}

.icon1 {
	position: absolute;
}

.settingItemName {
	position: absolute;
	margin: 0 0 0 100rpx;
}
.icon2 {
	position: absolute;
	margin: 0 0 0 600rpx;
}
</style>
